<template>
    <view class="page">
        <view class="header">
            <view class="left">
                <u-text color="#ffffff" margin="8px 0 8px 0" :text="house_name" size="16"></u-text>
                <u-text color="#ffffff" margin="8px 0 8px 0" :text="'承租人：' + r_name"></u-text>
                <view style="float: left">
                    <u-tag borderColor="#ffffff" color="#ffffff" text="电子合同" plain size="mini"></u-tag>
                </view>
            </view>
            <view class="right" @click="callHandler">
                <u-icon color="#ffffff" :customStyle="{padding:20+'rpx',marginTop:30+'rpx'}" name="phone" size="52"></u-icon>
            </view>
        </view>

        <u-sticky bgColor="#fff">
            <u-tabs :list="list" :current="current" @change="changeHandler"></u-tabs>
        </u-sticky>

        <list-a v-if="list[current].type===1" :detail="detail"></list-a>
        <list-b v-if="list[current].type===2" :finance="finance"></list-b>
        <list-c v-if="list[current].type===3" :userinfo="userinfo"></list-c>
        <list-d v-if="list[current].type===4" :contract="contract"></list-d>

        <u-gap height="100"></u-gap>
        <view class="he-settlement">
            <view class="footer">
                <u-button type="default" :plain="true" text="续租" @click="reSubmit"></u-button>
                <u-button type="default" :plain="true" text="修改租约" @click="update"></u-button>
                <u-button type="primary" text="退房" @click="refund"></u-button>
            </view>
            <view class="safe-area-inset-bottom"></view>
        </view>
    </view>
</template>

<script>
    import ListA from './components/ListA';
    import ListB from './components/ListB';
    import ListC from './components/ListC';
    import ListD from './components/ListD';

    export default {
        name: "lease",
        components:{
            ListA,
            ListB,
            ListC,
            ListD,
        },
        data(){
            return{
                current: 0,
                update: true,
                list: [{
                    name: '详情',
                    type: 1
                }, {
                    name: '账务',
                    type: 2
                }, {
                    name: '租客',
                    type: 3
                }, {
                    name: '合同',
                    type: 4
                }],

                house_name:'',
                r_name:'',
                userinfo:{},
                detail:{},
                finance:{},
                contract:{}
            }
        },
        onLoad(option){
            let url = '/api.php/house/house_lease' + uni.$u.queryParams({h_id: option.h_id, z_id: option.z_id});
            uni.showLoading({title: '正在加载'});
            uni.$u.http.get(url).then(res => {
                uni.hideLoading();
                this.house_name = res.house_name;
                this.r_name = res.r_name;
                this.userinfo = res.userinfo;
                this.detail = res.detail;
                this.finance = res.finance;
                this.contract = res.contract;
            });
        },
        methods:{
            changeHandler(e){
                this.current = e.index;
            },

            callHandler(){
                uni.makePhoneCall({
                    phoneNumber: this.userinfo.tel.toString()
                });
            },

            update(){

            },
            reSubmit(){

            },
            // 退房
            refund(){
                let data = {u_id: uni.getStorageSync('u_id'), up_id: this.userinfo.up_id}; //todo
                uni.showLoading({title: '正在加载'});
                uni.$u.http.post('/api.php/House/check_out',data).then(res => {
                    uni.hideLoading();
                    uni.navigateBack({delta: 1});
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }
    .content{
        padding: 20rpx;
    }

    .header{
        height: 100px;
        background-color: #3c9cff;
        display: flex;
        flex-direction: row;

        .left{
            flex:9;
            padding-left: 30rpx;
        }
        .right{
            flex:1;
            border-left: 3px solid #fff;
        }
    }

    .he-settlement {
        position: fixed;
        bottom: var(--window-bottom);
        width: 100%;
        /*min-height: 56px;*/
        background: #FFFFFF;
        z-index: 2;
        border-top: 1rpx solid #c0c4cc;
    }

    .footer{
        @include flex(row);
        justify-content: space-between;
        padding: 20rpx 20rpx 0 20rpx;
    }
</style>